<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
</head>

<body>
    <div class="music-box">
        <img class="play-item" src="images/play-item.png" alt="">
        <p><img class="bg  pause" src="images/bg.png" alt=""></p>
        <p><img class="play-btn"   onClick="play()"  src="images/pause.png" alt="user" ></p>
        <audio id="music" src="入世.flac" loop autoplay></audio>
        <!-- <audio controls> -->
            <!-- <source src="入世.flac" type="audio/mpeg"> -->
            <!-- <source src="入世.ogg" type="audio/ogg"> -->
          <!-- </audio> -->
    </div>
    <script>
        // 1.播放按钮能正常切换
        let  isPlay = false; //记录播放的状态
        $(".play-btn").click(function(){
            if(isPlay){
                isPlay = false
                $(this).attr("src","images/pause.png")
                $(".bg").addClass("pause").removeClass("play");
                $(".play-item").addClass("item-pause").removeClass("item-play")

            }else{
                isPlay = true;
                $(this).attr("src","images/play.png")
                $(".bg").addClass("play").removeClass("pause")
                $(".play-item").addClass("item-play").removeClass("item-pause")
            }
            console.log(isPlay)
        })
    </script>
    <script>
        window.onload = function(){ 
             var audio = document.getElementById('music');
                 audio.pause();//打开页面时无音乐
        }
        function play() {
            var audio = document.getElementById('music');
            if (audio.paused) {
                audio.play();
                document.getElementById('musicImg').src="images/play.png";
            }else{
                audio.pause();
                audio.currentTime = 0;//音乐从头播放
                document.getElementById('musicImg').src="images/pause.png";
            }
        }
    </script>
</body>

</html>